<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局案例</title>
    <style>
        *{
            padding:0;
            margin: 0;
            box-sizing: border-box;
        }

        aside{
           width:200px;
           height: 700px; 
           border:1px solid black;
           float:left;
        }

        .main{
            width:800px;
            height: 700px;
            border: 1px solid red;
            margin-left:10px;
            float:left;
            position: relative;
        }
        .container{
            margin:10px auto;
            width:1020px;
        }
        aside nav{
            margin-top:30px;
            margin-left:20px;
        }

        aside nav ul{
            list-style: none; 
         }

        aside nav ul li{
            width:80%;
            height: 40px;
            background-color: #36424B;
        }
        aside nav ul a{
            text-decoration: none;
            color:white;
            line-height: 40px;
            margin-left:20px;
        }

     .main>header{
         width:100%;
         height: 50px;
         background-color: teal;
         /* 将文本设置为水平居中 */
         text-align: center;
     }

     .main>header h1{
         color:white;
         line-height: 50px;
     }

     .main>footer{
         width: 100%;
         height: 40px;
         background-color: #ccc;
         position: absolute;
         bottom: 0px;
     }
    </style>
</head>
<body>
    <div class="container">
      <!-- 左边栏 -->
      <aside>
          <nav>
              <ul>
                  <li><a href="#">首页</a></li>
                  <li><a href="#">国内旅游</a></li>
                  <li><a href="#">国外旅游</a></li>
                  <li><a href="#">家里蹲</a></li>
              </ul>
          </nav>
      </aside>
      <!-- / 左边栏 -->
      <!-- 右边栏 -->
      <section class="main">
         <header>
           <h1>国内计划</h1>
         </header>

         <footer>
           <a href="#">手机版</a>
           <a href="#">电脑版</a>
           <a href="#">App</a>
         </footer>
      </section>
      <!-- / 右边栏 -->
    </div>
</body>
</html>